<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="/0.5/components/polymer/polymer.html">
<link rel="import" href="/0.5/components/core-selector/core-selector.html">
<link rel="import" href="/0.5/components/core-icons/core-icons.html">
<link rel="import" href="/0.5/components/plunker-button/plunker-button.html">

<polymer-element name="demo-tab" attributes="heading" noscript>
  <template>
    <style>
      :host {
        display: none;
      }
      :host(.selected) {
        display: block;
      }
    </style>
    <content></content>
  </template>
</polymer-element>


<polymer-element name="demo-tabs" attributes="selected bottom theme demoSrc">
  <template>
    <link rel="stylesheet" href="../../css/elements/demo-tabs.css">
    <div id="container" class="{{theme}}">
      <div id="tabstrip" layout horizontal center>
        <core-selector selected="{{selected}}" selectedClass="selected" class="tab-wrapper" flex>
          <template repeat="{{panel in panels}}">
            <span>{{panel.heading}}</span>
          </template>
        </core-selector>
        <template if="{{demoSrc}}">
          <plunker-button src="{{demoSrc}}">Edit on Plunker</plunker-button>
        </template>
      </div>
      <div id="wrapper" class="{{ {bottom: bottom} | tokenList}}">
        <core-selector id="contents" selected="{{selected}}" selectedClass="selected">
          <content id="contentpanels" select="demo-tab"></content>
        </core-selector>
        <div id="results" class="show">
          <content id="contentresults" select=".result"></content>
        </div>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      /**
       * If set, the `demoSrc` attribute will add a `plunker-button` to let the
       * user preview the demo on the Plunker service. The value of `demoSrc`
       * should be a path that points to the `manifest.json` for the demo.
       *
       * ex: <demo-tabs demoSrc="/samples/components/age-slider/manifest.json">
       *
       * @attribute demoSrc
       * @type string
       * @default null
       */
      demoSrc: null,
      theme: 'light',
      selected: 0,
      bottom: false, // Force results panel to be on bottom, even on desktop.
      domReady: function() {
        // Wait for domReady so demo-tab.panel is available in updatePanels.
        this.updatePanels();
      },
      updatePanels: function() {
        this.panels = Array.prototype.slice.call(
            this.$.contentpanels.getDistributedNodes());

        // If no <demo-tab> light dom have headings attributes, hide #tabstrip.
        var noHeadings = true;
        for (var i = 0, panel; panel = this.panels[i]; ++i) {
          if (panel.heading) {
            noHeadings = false;
            break;
          }
        }
        this.$.tabstrip.hidden = noHeadings;

        this.$.results.classList.toggle(
            'show', this.$.contentresults.getDistributedNodes().length);
        this.onMutation(this, this.updatePanels); // Watch changes to light dom.
      }
    });
  </script>
</polymer-element>
